<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./assets/news.css" />
    <script src="./lib/jquery.js"></script>
    <script src="./lib/axios.js"></script>
</head>

<body>

    <div id="news-list">
        <!-- <div class="news-item">
            <img class="thumb" src="http://ajax-base-api-t.itheima.net/images/0.webp" alt="" />
            <div class="right-box">
                <h1 class="title">5G商用在即，三大运营商营收持续下降</h1>
                <div class="tags">
                    <span>三大运营商</span>
                    <span>中国移动</span>
                    <span>5G商用</span>
                </div>
                <div class="footer">
                    <div>
                        <span>新京报经济新闻</span>&nbsp;&nbsp;
                        <span>2019-10-26 16:51:30</span>
                    </div>
                    <span>评论数：58</span>
                </div>
            </div>
        </div> -->
    </div>


    <script>
        const newList = document.querySelector('#news-list')

        // get请求获取新闻列表
        axios({
            method: 'get',
            url: 'http://ajax-base-api-t.itheima.net/api/news',
        }).then((res) => {

            // console.log(res.data.data);
            // 拿到新闻列表数组
            const arr = res.data.data

            // 遍历数组
            for (let i = 0; i < arr.length; i++) {
                newList.innerHTML += `
                <div class="news-item">
                <img class="thumb" src="http://ajax-base-api-t.itheima.net/images/${i}.webp" alt="" />
                <div class="right-box">
                <h1 class="title">${arr[i].title}</h1>
                <div class="tags">
                 
                ${arr[i].tags.split(',').map(item => `<span>${item}</span>`).join('')}
                    </div>
                <div class="footer">
                    <div>
                        <span>${arr[i].source}</span>&nbsp;&nbsp;
                        <span>${arr[i].time.replace('T', ' ').substring(0, 19)}</span>
                    </div>
                    <span>评论数：${arr[i].cmtcount}</span>
                </div>
            </div>
        </div>`

            }

        })




    </script>





</body>

</html>